.size20 {
  --ring-avatar-stack-offset: 12px;
  --ring-avatar-stack-mask-image: url('avatar-stack.mask-20.svg');
}

.size24 {
  --ring-avatar-stack-offset: 16px;
  --ring-avatar-stack-mask-image: url('avatar-stack.mask-24.svg');
}

.size28 {
  --ring-avatar-stack-offset: 18px;
  --ring-avatar-stack-mask-image: url('avatar-stack.mask-28.svg');
}

.size32 {
  --ring-avatar-stack-offset: 20px;
  --ring-avatar-stack-mask-image: url('avatar-stack.mask-32.svg');
}

.size40 {
  --ring-avatar-stack-offset: 26px;
  --ring-avatar-stack-mask-image: url('avatar-stack.mask-40.svg');
}

.size56 {
  --ring-avatar-stack-offset: 42px;
  --ring-avatar-stack-mask-image: url('avatar-stack.mask-56.svg');
}

.avatarStack {
  position: relative;

  display: inline-flex;
}

.item {
  position: relative;

  margin: -1px;
  margin-left: calc(var(--ring-avatar-stack-offset) * -1 - 1px);
  padding: 1px;

  transition: transform var(--ring-fast-ease);
  mask-image: var(--ring-avatar-stack-mask-image);
  mask-position: calc(var(--ring-avatar-stack-offset) - 3px) 0;
  mask-repeat: no-repeat;

  border-radius: calc(var(--ring-border-radius) + 1px);

  background-color: var(--ring-content-background-color);
}

.item:nth-child(1) {
  --ring-avatar-stack-index: 0;
  --ring-avatar-stack-offset: 0px;

  mask: none;
}

.hovered .item,
.avatarStack:hover .item,
.avatarStack:focus-within .item {
  mask: none;

  transform: translateX(calc((var(--ring-avatar-stack-offset) + 2px) * var(--ring-avatar-stack-index)));
}

.extra {
  composes: item;
}

.extraButton {
  composes: resetButton from '../global/global.css';

  cursor: pointer;

  border-radius: var(--ring-border-radius);
}

.extraButton:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--ring-border-hover-color);
}

.extraText {
  transition: opacity var(--ring-fast-ease);

  opacity: 0;
}

.hovered .extraText,
.avatarStack:hover .extraText,
.avatarStack:focus-within .extraText {
  opacity: 1;
}


